<template>
        <Menu ref="sideMenu" :active-name="currentPageName" :theme="'dark'" :open-names="openedSubmenuArr" :width="'auto'" @on-select="changeMenu">
            <template v-for="item in menuList">
                <MenuItem v-if="item.children.length<1" :name="item.name" :key="item.path">   
                    <span class="layout-text menu-untask" :key="item.path">{{ item.title }}
                        <span v-if="item.title==='待处理工单' && untreatedNum" class="menu-untask-item">{{untreatedNum}}</span>
                    </span>
                </MenuItem>
    
                <Submenu v-if="item.children.length>=1" :name="item.name" :key="item.path">
                    <template slot="title">
                        <Icon :type="item.icon" :size="iconSize"></Icon>
                        <span class="layout-text">{{ item.title }}</span>
                    </template>
<template v-for="child in item.children">
                        <MenuItem :name="child.name" :key="child.name">
                            <Icon :type="child.icon" :size="iconSize" :key="child.name"></Icon>
                            <span class="layout-text" :key="child.name">{{ child.title }}</span>
                        </MenuItem>
                    </template>
</Submenu>
</template>
</Menu>
</template>
<style scoped>
    .ivu-menu-vertical .ivu-menu-item {
        padding: 7px 0;
        color: #fff;
        text-align: center;
        /* border-bottom: solid 1px #fff; */
    }
    
    .ivu-menu-dark.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
        color: #495060;
        background-color:#fff;
        border-right: none;
    }
    .ivu-menu-dark.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu), 
    .ivu-menu-dark.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu):hover, 
    .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu-title-active:not(.ivu-menu-submenu),
    .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu-title-active:not(.ivu-menu-submenu):hover{
        background: #fff!important;
    }
</style>
<style>
    .menu-untask-item {
        /* position: absolute; */
        -webkit-transform: translateX(50%);
        transform: translateX(50%);
        /* top: -8px;
        right: -9px; */
        height: 18px;
        border-radius: 10px;
        min-width: 18px;
        background: #ed3f14;
        border: 1px solid transparent;
        color: #fff;
        line-height: 18px;
        text-align: center;
        padding: 0 4px;
        font-size: 12px;
        white-space: nowrap;
        -webkit-transform-origin: -10% center;
        transform-origin: -10% center;
        z-index: 10;
        box-shadow: 0 0 0 1px #fff;
    }
    
    .menu-untask {
        position: relative;
    }
</style>
<script>
    import dom from '@/libs/dom.js';
    import {
        mapGetters
    } from 'vuex';
    export default {
        data() {
            return {
                currentPageName: this.$route.name,
                openedSubmenuArr: []
            };
        },
        name: 'sidebarMenu',
        props: {

            menuList: Array,
            iconSize: Number
        },
        computed: {
            ...mapGetters({
                loginUserInfo: 'loginUserInfo',
                untreatedNum: 'untreatedNum'
            })
        },
        mounted: function() {
            this.getuntaskItem()
        },
        methods: {
            getuntaskItem() {
                if (this.loginUserInfo.curHandlerId) {
                    var curHandlerId = this.loginUserInfo.curHandlerId;
                }
                this.$store.dispatch('getuntreatedNum', curHandlerId)
            },
            changeMenu(active) {
                this.$store.dispatch('recordPageTags', active)
                this.$store.commit('setCurrentPageName', active);
                this.$router.push({
                    name: active
                });

                // if (active === 'callconfirm_index') {
                //     this.$store.commit('removeTag', 'voicecall_index')
                // }
                if (active === 'repository') {
                    this.$store.commit('removeTag', 'repository')
                }
            }
        },
        watch: {
            '$route' (to) {
                this.currentPageName = to.name;
                localStorage.currentPageName = to.name;

            },
            loginUserInfo(newVal, oldVal) {
                this.getuntaskItem()
            },
            untreatedNum(newVal, oldVal) {

            }
        },
        updated() {
            this.$nextTick(() => {
                let path = this.$route.name
                let ele = document.querySelectorAll('.ivu-menu-item')[1]
                if (ele) {

                    if (path === 'voicecall_index') {
                        dom.addClass(ele, 'ivu-menu-item-active')
                    } else if (path !== 'callconfirm_index') {
                        dom.removeClass(ele, 'ivu-menu-item-active')
                    }
                }

            });
        }

    };
</script>